import { useEffect, useState, Key } from "react"
import { Card, Button, Form, Input, Table, Divider, message } from "antd"
import { SearchOutlined } from "@ant-design/icons"

// 编程式导航hook
import { useNavigate } from "react-router-dom"
// 请求
import { getPageList, deleteById, deleteListId } from "@api/hospitalSet"
// 拆分组件
import { useColumns } from "./useColumns"

// 接口和类型
import { hospitalSetsLsType } from "@api/hospitalSet/model"

import "./index.less"
export default function HospitalSet() {
  // 使用useNavigate,得到一个可以修改路径navigate函数
  const navigate = useNavigate()
  // 使用接口限制状态的类型（数组）以及内部数据的格式
  let [data, setState] = useState<any>([])

  // 定义分页的状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(15)
  // 批量删除id数组
  const [clearData, setClearData] = useState<Key[]>([])
  // 表格加载中
  const [loading, setLoading] = useState(false)
  // 医院名称和编码状态
  let [hosname, sethosname] = useState<string>("")
  let [hoscode, sethoscode] = useState<string>("")
  const [form] = Form.useForm()
  // 打开自动获取数据渲染
  useEffect(() => {
    getPageList({ page, pageSize }).then((data) => {
      setState(data.records)
      setTotal(data.total)
    })
  }, [])

  // 查询
  const onSearch = async () => {
    const xxx = await getHospitalSets(page, pageSize)
  }
  // 删除
  const onDelete = (id: number) => {
    deleteById(id)
      .then(() => {
        message.success("删除成功")
        onSearch()
      })
      .catch((err) => console.log("err", err))
  }

  // 组件挂载和用户点击分页按钮,都调用这个函数
  async function getHospitalSets(page: number, pageSize: number) {
    setLoading(true)
    const result = await getPageList({
      page,
      pageSize,
      hosname,
      hoscode,
    })

    // 由于分页的onchange也用了当前这个函数,所以当用户点击分页,要修改page和pageSize的值
    setPage(page)
    setPageSize(pageSize)
    // 根据响应数据,修改total和HospitalSetsLs,动态渲染表格
    setState(result.records)
    setTotal(result.total)
    setLoading(false)
    sethosname("")
    sethoscode("")
    return result
  }

  // 批量删除事件
  const selected = async () => {
    // 逻辑，拿到id,定义状态clearData存储id，发送请求删除id相关数据，提示删除成功，查询获取数据渲染
    // console.log(clearData) 这里可以直接拿到数组存储的id

    // 发送请求，成功之后弹窗提示，刷新页面，将状态清空
    await deleteListId(clearData)
    message.success("批量删除成功")
    onSearch()
    setClearData([])
  }

  // onchange事件
  const setBatchDelButton = (selectedRowKeys: Key[]) => {
    // onChange在点击的时候触发事件，里面可以拿到相关数据，selectedRowKeys可用获取到id
    // 存储id数据到clearData
    setClearData(selectedRowKeys)
    // console.log(selectedRowKeys)  // 选中数据的id
  }

  // 行
  const columns = useColumns(onDelete)

  return (
    <Card>
      <Form name="basic" layout="inline" form={form} onFinish={onSearch}>
        <Form.Item>
          <Input
            placeholder="医院名称"
            value={hosname}
            onChange={(e) => {
              sethosname(e.target.value)
            }}
          />
        </Form.Item>

        <Form.Item>
          <Input
            placeholder="医院编号"
            value={hoscode}
            onChange={(e) => sethoscode(e.target.value)}
          />
        </Form.Item>

        <Form.Item>
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>

        <Form.Item>
          <Button
            onClick={() => {
              console.log(hosname, hoscode)

              getHospitalSets(1, 5) // 重新渲染
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      {/* 添加删除按钮 */}
      <Button
        type="primary"
        className="btn-tn"
        onClick={() => {
          // 页面跳转到add
          navigate("/syt/hospital/hospitalSet/add")
        }}
      >
        添加
      </Button>

      <Button
        disabled={!clearData.length} // 设置为true表示为不可用,不能写死，可以根据数组内是否有id来确定状态
        type="primary" //设置颜色
        danger
        onClick={selected}
      >
        批量删除
      </Button>

      {/* 表格 */}
      <Divider />
      <Table
        loading={loading}
        columns={columns}
        dataSource={data}
        // 添加key
        rowKey="id"
        // 允许表格出现滚动条
        scroll={{ x: 1500 }}
        // 设置表格边框
        bordered
        // 分页器
        pagination={{
          current: page,
          // 指定每页显示多少条
          pageSize,
          //总共有多少数据， 会根据传入的total计算页数，一页默认十条
          total,

          // 展示动态修改一页多少条数据
          showSizeChanger: true,

          // 指定每页可以显示多少条数据
          pageSizeOptions: ["2", "5", "8"],

          // 是否可以跳转至某页
          showQuickJumper: true,

          // 显示总数据量
          showTotal: (total) => {
            return `一共${total}家医院`
          },
          // 切换页面及pagesize发生改变时发送请求修改页码
          onChange: getHospitalSets,
        }}
        // 可选框
        rowSelection={{
          onChange: setBatchDelButton,
        }}
      />
    </Card>
  )
}
